<template>
  <div>
    <div>
      <div class="header flex">
        <span>信息</span>
        <el-input
          class="input"
          clearable
          v-model="deptName"
          placeholder="人事部"
        ></el-input>
        <el-button @click="cha()">查询</el-button>
        <el-button @click="clear()">重置</el-button>
        <el-button @click="handleDelete()">删除</el-button>
        <!-- 弹框  新增-->
        <el-popover placement="top" width="560" v-model="visible">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >

              <el-form-item label="员工姓名" prop="name">
                <!-- el-select  @change="fn" 点击name获取部门 -->
                <el-select
                  v-model="ruleForm.name"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="ruleForm.phone"
                  placeholder="1818818181"
                ></el-input>
              </el-form-item>
              <!-- 学历 -->
              <!-- <el-form-item label="所属部门" prop="deptName">
                <el-input v-model="ruleForm.deptName" placeholder="生产部"></el-input>
              </el-form-item> -->
              <el-form-item label="所属部门" prop="deptName">
                <el-select
                  v-model="ruleForm.deptName"
                  placeholder="请选择部门"
                >
                  <el-option
                    v-for="item in bumens"
                    :key="item.ccdd"
                    :label="item.name"
                    :value="item.ccdd"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学历" prop="educational">
                <el-input
                  v-model="ruleForm.educational"
                  placeholder="本科"
                ></el-input>
              </el-form-item>
              <el-form-item label="生日" prop="birthday">
                <el-input
                  v-model="ruleForm.birthday"
                  placeholder="2002-02-28"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="入职日期" prop="date">
                <el-input v-model="ruleForm.date"></el-input>
              </el-form-item> -->
              <el-form-item label="入职日期" prop="date">
                <el-date-picker
                  v-model="ruleForm.date"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="员工类型" prop="type">
                <el-radio-group v-model="ruleForm.type">
                  <el-radio v-model="ruleForm.type" label="普通员工"></el-radio>
                  <el-radio v-model="ruleForm.type" label="经理"></el-radio>
                  <el-radio v-model="ruleForm.type" label="人事专员"></el-radio>
                  <el-radio v-model="ruleForm.type" label="财务专员"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="visible = false"
              >确定</el-button
            >
          </div>
          <!-- 新增按钮 -->
          <el-button type="primary" slot="reference">新增</el-button>
        </el-popover>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- 点击按钮 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- 需求人数 -->
        <el-table-column label="员工工号" width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="员工姓名"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="员工手机"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="所属部门" width="120">
          <template slot-scope="scope">{{ scope.row.deptName }}</template>
        </el-table-column>
        <el-table-column
          prop="educational"
          label="学历"
          width="120"
        ></el-table-column>
        <el-table-column prop="age" label="年龄" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="入职日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="type" label="员工类型" width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column width="120" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <!-- <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, tableData)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改内容 -->
    <el-dialog title="修改员工档案" :visible.sync="dialogVisible2" width="50%">
      <!-- 表单 -->
      <el-form
        :model="form2"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="员工姓名" prop="name">
          <el-input v-model="form2.name"></el-input>
        </el-form-item>
        <el-form-item label="员工手机" prop="phone">
          <el-input v-model="form2.phone"></el-input>
        </el-form-item>

        <el-form-item label="所属部门" prop="deptName">
          <el-select v-model="form2.deptName" placeholder="请选择活动区域">
            <el-option
              v-for="item in bumens"
              :key="item.ccdd"
              :label="item.name"
              :value="item.ccdd"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 学历 -->
        <el-form-item label="学历" prop="educational">
          <el-input v-model="form2.educational"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form2.age"></el-input>
        </el-form-item>

        <el-form-item label="入职日期" prop="date">
          <el-date-picker
            v-model="form2.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="需求负责人" prop="side">
          <el-select v-model="form2.side" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="员工类型" prop="type">
          <el-radio-group v-model="form2.type">
            <el-radio label="普通员工"></el-radio>
            <el-radio label="经理"></el-radio>
            <el-radio label="人事专员"></el-radio>
            <el-radio label="财务专员"></el-radio>

          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="form2.createTime"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleClose2(form2)">确 定</el-button>
      </span>
    </el-dialog>
    <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
  </div>
</template>

<script>
import {
  staffAPI,
  DeleteAPI,
  newaddedAPI,
  xiuListAPI,
  userListApi,
  chanameList,
  chanameandbuList,
  chabuList,
} from "@/api/4-1_staffInfo";
export default {
  data() {
    return {
      value: "",
      options: [],
      bumens: [],
      ccdd: "",
      dialogVisible2: false, //编辑
      form2: {},
      deptName: "", //查询 人事部
      ruleForm: {
        name: "",
        phone: "",
        deptName: "",
        educational: "",
        birthday: "",
        type: [],
        date: "",
      },
      rules: {},
      total: 0, // 列表总行数
      pageSize: 10,
      currentPage: 1,
      visible: false,
      tableData: [],
      dataList: [],
      multipleSelection: [],
    };
  },
  created() {
    this.needs(); //页面一刷新就获取页面的数据，并渲染该页面
    this.yuanname(); //查询员工姓名
    this.bus(); //修改的部门数据
  },
  components: {
    Pagin: () => import("c/Pagin"),
  },
  mounted() {},
  methods: {
    // 修改的弹框
    handleEdit(index, row) {
      this.dialogVisible2 = true;
      this.form2 = row;
      console.log(index, row);
    },
    // 修改内容
    async handleClose2() {
      const res = await xiuListAPI({
        name: this.form2.name,
        phone: this.form2.phone,
        deptName: this.form2.deptName,
        educational: this.form2.educational,
        birthday: this.form2.birthday,
        date: this.form2.date,
      });
      if (res.code == "1") {
        this.$message.success("修改成功");
      }
      this.dialogVisible2 = false;
    },
    // 修改部门
    async bus() {
      var r = await chabuList();
      console.log(r, "部门晚");
      r.data.forEach((item) => {
        var obj = { ccdd: item, name: item };
        this.bumens.push(obj);
      });
    },
    // 根据选择的姓名调用部门接口
    fn(name) {
      this.name = name;
      this.bumen();
    },
    // 修改部门
    fast({ code, name }) {
      console.log(11);
      this.bus();
    },
    //删除
    async handleDelete() {
      // 单选
      // const res = await DeleteAPI(row.id);
      // console.log(res);
      // this.dataList.splice(index, 1);
      // this.fetchData(this.currentPage);
      // this.total = this.dataList.length;
      // 全选
      var id = [];
      this.multipleSelection.forEach((item) => {
        id.push(item.id);
      });
      if (id.length > 0) {
        const res = await DeleteAPI(id);
        if (res.code == "1") {
          this.needs();
          this.$message.success("删除成功");
        }
      }
    },
    // 请求数据渲染页面
    async needs() {
      var res = await staffAPI();
      this.dataList = res.data;
      this.total = this.dataList.length;
      this.fetchData(this.currentPage);
    },
    //分页
    fetchData(count) {
      var list = this.dataList;
      var from = (count - 1) * this.pageSize;
      const to = count * this.pageSize;
      this.tableData = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from]);
        }
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加数据
    async submitForm(form) {
      console.log(form);
      var res = await newaddedAPI({
        name: form.name,
        phone: form.phone,
        deptName: form.deptName,
        educational: form.educational,
        birthday: form.birthday,
        date: form.date,
        type: form.type,
      });
      if (res.code == "1") {
        this.$message.success("添加成功");
        this.visible = false;
        this.needs();
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 查询员工姓名
    async yuanname() {
      var r = await chanameList();
      // r.name.map((item, i) => {
      //   item.value = item.name;
      // });
      // this.options = r.name;
      r.data.forEach((item) => {
        var obj = { value: item, name: item };
        this.options.push(obj);
      });
      if (this.options != "") {
        this.fn();
      }
      console.log("面试官", r.name);
      console.log("数组", this.options);
    },
    async bumen() {
      var r = await chanameandbuList(this.name);
      this.ruleForm.deptName = r;
    },
    // 查询
    async cha() {
      var res = await userListApi(this.deptName);
      var cartInfo = [];
      if (res.code == "1") {
        res.data.map((item, i) => {
          if (item.deptName == this.deptName) {
            cartInfo.push(item);
          }
        });
        console.log("查询", res);
        //   this.dataList = res.data;
        this.dataList = cartInfo;
        this.total = this.dataList.length;
        this.fetchData(this.currentPage);
        this.$message.success("查询成功");
      } else {
        this.$message.success("未查询到结果！请检查接口");
      }
    },
    clear() {
      this.cartType = "";
      this.needs();
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 120px;
}
.header {
  width: 40%;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
</style>
